/** @type {import('tailwindcss').Config} */

const lenMapper = {
  full: "100%",
  "1/2": "50%",
  "1/2-2": "80%",
  "1/3": "33.33%",
  "1/4": "25%",
  "1/5": "20%",
  "2/3": "66.66%",
  "9/20": "40%",
  "3/5": "60%",

  10: "10rpx",
  15: "15rpx",
  20: "20rpx",
  25: "25rpx",
  30: "30rpx",
  35: "35rpx",
  40: "40rpx",

  60: "60rpx",
  70: "70rpx",
  80: "80rpx",

  100: "100rpx",
  120: "120rpx",
  150: "150rpx",
  200: "200rpx",
  300: "300rpx",
  350: "350rpx",
  380: "380rpx",
  400: "400rpx",
  500: "500rpx",
  600: "600rpx",
};

module.exports = {
  content: ["./src/**/*.{vue,html,js}"],
  theme: {
    spacing: {
      0: "0",
      200: "200rpx",
      small: "4rpx",
      mini: "8rpx",
      "mini-2": "12rpx",
      middle: "16rpx",
      "middle-2": "24rpx",
      large: "32rpx",
      "large-2": "48rpx",
    },
    width: lenMapper,
    height: lenMapper,
    extend: {},
  },
  plugins: [],
};
